*{
    margin: 0px;
    padding: 0px;
    list-style: none;
}
html{
    /* 1rem == 10px */
    font-size: 62.5%;
    color: #1a1a1a;
    font-family: pfcg;
}
/* 媒体查询 */
@media only screen{
    @media (min-width: 1200px) and (max-width: 1920px){
        body{
            .header{
                max-width: 1200px;
                margin: 0 auto !important;
            }
            font-size: 1.4rem !important;
            .banner{
                .content{
                    left: 0;
                    right: 0;
                    margin: 0 auto;
                    width: 100%;
                    max-width: 1200px;
                    padding: 160px 0 0 0 !important;
                }
            }
        }
    }
    @media (min-width: 768px) and (max-width: 1200px){
        body{
            font-size: 1.4rem !important;
            .header{
                padding: 0 30px !important;
            }
            .footer{
                padding: 20px 30px !important;
            }
            .recommend{
                .side{
                    .list{
                        .item{
                            .img{
                                width: 30%;
                                display: flex;
                                align-items: center;
                                img{
                                    border-radius: 50%;
                                    width: 40px;
                                    height: 40px;
                                }
                            }
                            .content{
                                width: 70%;
                            }
                        }
                    }
                }
            }
            // 工具推荐
            .toolSharing{
                &>.content{
                    padding: 0 30px;
                    .right{
                        .img{
                            width: 30px !important;
                                height: 30px !important;
                            img{
                                width: 30px !important;
                                height: 30px !important;
                            }
                        }
                        .content{
                            .describe{
                                display: none;
                            }
                        }
                    }
                }
            }
            .aboutMe{
                &>.content{
                    padding: 50px 30px !important;
                    .content{
                        .footer{
                            .list{
                                .item{
                                    // flex-direction: column;
                                    .label{
                                        overflow: hidden;
                                        word-break: keep-all; // 不换行
                                        text-overflow: ellipsis; // 超出隐藏
                                        white-space: wrap; // 强制在一行
                                    }
                                }
                            }
                        }
                    }
                }
                // 我的技能
                .skill{
                    padding: 0 30px;
                    .list{
                        .item{
                            .label{
                                width: 16% !important;
                            }
                            .value{
                                width: 84% !important;
                            }
                        }
                    }
                }
            }
            .class{
                .menu{
                    padding: 0px 30px;
                }
            }
            // 设置轮播图响应式
            .banner{
                height: 480px !important;
                .content{
                    padding: 100px 30px 0 !important;
                }
            }
        }
    }
    
    @media (min-width: 550px) and (max-width: 768px){
        body{
            font-size: 1.4rem !important;
            // 头部导航
            .header{
                padding: 0 30px !important;
                .search{
                    input{
                        width: 88% !important;
                    }
                    svg{
                        width: 12% !important;
                    }
                }
            }
            .class{
                .menu{
                    padding: 0px 30px;
                }
            }
            .toolSharing{
                &>.content{
                    padding: 0 30px;
                    .right{
                        .img{
                            width: 30px !important;
                                height: 30px !important;
                            img{
                                width: 30px !important;
                                height: 30px !important;
                            }
                        }
                        .content{
                            .describe{
                                display: none;
                            }
                        }
                    }
                }
            }
            // 关于我
            .aboutMe{
                .top{
                    .content{
                        .center{
                            font-size: 3.2rem !important;
                            &>.center{
                                &>span{
                                    margin: 0 10px !important;
                                }
                            }
                            .footer{
                                font-size: 1.6rem !important;
                            }
                        }
                    }
                }
                &>.content{
                    padding: 30px 30px !important;
                    .avatar{
                        text-align: center !important;
                        margin: 0 auto !important;
                    }
                    .content{
                        .footer{
                            .list{
                                .item{
                                    flex-direction: column;
                                    .label{
                                        margin: 0px;
                                    }
                                }
                            }
                        }
                    }
                }
                // 我的技能
                .skill{
                    padding: 0 30px;
                    .list{
                        .item{
                            .label{
                                width: 22% !important;
                            }
                            .value{
                                width: 78% !important;
                            }
                        }
                    }
                }
            }
            // 设置轮播图响应式
            .banner{
                height: 300px !important;
                .content{
                    top: 50% !important;
                    left: 50% !important;
                    transform: translate(-50%,-50%) !important;
                    padding: 0px !important;
                    .shake{
                        text-align: center;
                        .describe{
                            display: none;
                        }
                        .button{
                            padding-top: 0px !important;
                        }
                    }
                }
            }
        }
    }
    
    @media (min-width: 320px) and (max-width: 550px){
        body{
            font-size: 1.4rem !important;
            .header{
                padding: 0 20px !important;
                // 登录或注册
                .LogInOrRegistered{
                    .content{
                        width: 340px !important;
                        .center{
                            input{
                                width: 280px !important;
                            }
                            .ant-input-password{
                                width: 280px !important;
                            }
                        }
                    }
                }
                // 搜索
                .search{
                    input{
                        width: 88% !important;
                    }
                    svg{
                        width: 12% !important;
                    }
                }
            }
            .class{
                .menu{
                    padding: 0px 30px;
                }
            }
            .toolSharing{
                &>.content{
                    padding: 0 30px;
                    .right{
                        .list{
                            padding: 20px 20px !important;
                            .item{
                                width: 50% !important;
                                .img{
                                    width: 30px !important;
                                        height: 30px !important;
                                    img{
                                        width: 30px !important;
                                        height: 30px !important;
                                    }
                                }
                                .content{
                                    .describe{
                                        display: none;
                                    }
                                }
                            }
                        }
                    }
                }
            }
            .aboutMe{
                .top{
                    .content{
                        .center{
                            font-size: 3.2rem !important;
                            &>.top{
                                font-size: 2.2rem !important;
                            }
                            &>.center{
                                font-size: 2.2rem !important;
                                &>span{
                                    margin: 0 10px !important;
                                }
                            }
                            .footer{
                                font-size: 1.6rem !important;
                            }
                        }
                    }
                }
                &>.content{
                    padding: 30px 30px !important;
                    .avatar{
                        text-align: center !important;
                        margin: 0 auto !important;
                    }
                    .content{
                        .footer{
                            .list{
                                .item{
                                    flex-direction: column;
                                    .label{
                                        margin: 0px;
                                    }
                                }
                            }
                        }
                    }
                }
                // 我的技能
                .skill{
                    padding: 0 30px;
                    .list{
                        .item{
                            .label{
                                width: 30% !important;
                            }
                            .value{
                                width: 70% !important;
                            }
                        }
                    }
                }
            }
            .footer{
                text-align: center;
                div{
                    div{
                        div{
                            &:not(:last-child){
                                margin-bottom: 20px;
                            }
                        }
                    }
                }
            }
            // 设置轮播图响应式
            .banner{
                height: 260px !important;
                .content{
                    top: 50% !important;
                    left: 50% !important;
                    transform: translate(-50%,-50%) !important;
                    padding: 0px !important;
                    .shake{
                        text-align: center;
                        .describe{
                            display: none;
                        }
                        .button{
                            padding-top: 0px !important;
                        }
                    }
                }
            }
        }
    }
}